<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:09:00
-->
<template>
  <div class="head">
    <div class="logo">
      <div class="box">
        <div class="left">
          <img src="https://www.gxust.edu.cn/images/logo.png" alt="" />
        </div>
        <div class="right">
          <img src="https://www.gxust.edu.cn/images/txt.png" alt="" />
        </div>
      </div>
    </div>
    <div class="wrapper">
      <el-tooltip class="item" effect="dark" content="返回首页" placement="top">
        <div class="title" @click="toHome()">行学天下</div>
      </el-tooltip>

      <div class="category">
        <ul>
          <li
            @click="toList(item.id, item.name)"
            v-for="item in categorys"
            :key="item.id"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="contact" @click="toContact()">
        <img width="20px" src="../../assets/联系我们.png" alt="" />
        联系我们
      </div>
    </div>
  </div>
</template>

<script>
// 引入axios
import { get } from "../../utils/request";
export default {
  // 存放数据
  data() {
    return {
      categorys: [],
    };
  },
  methods: {
    // 查询所有分类信息
    findAllCategory() {
      // 数据交互 axios
      get("/index/category/findCategoryTree").then((res) => {
        if (res.status == 200) {
          this.categorys = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    // 跳转到联系我们页面
    toContact() {
      // 跳转页面
      this.$router.push({ path: "/contact" });
    },
    toHome() {
      this.$router.push({ path: "/home" });
    },
    // 跳转到列表页面
    toList(id, name) {
      this.$router.push({
        path: "/list",
        query: {
          categoryId: id,
          name: name,
        },
      });
    },
  },
  // 生命周期钩子函数  页面加载完之后
  created() {
    // 调用查询方法
    this.findAllCategory();
  },
};
</script>

<style scoped lang='scss'>
.head {
  background-image: url('https://www.gxust.edu.cn/images/back01.png');
  height: 160px;
  box-shadow: 0 1px 5px #ccc;
  padding: 0 0.5em 0 0;
  .logo {
    height: 100px;
    .box {
      width: 90%;
      height: 100px;
      margin: auto;
      display: flex;
      .left {
        margin: 0 0;
        display: flex;
        img {
          margin: auto;
        }
      }
      .right {
        margin: auto 0 0 auto; //上右下左 顺时针
      }
    }
  }

  .wrapper {
    width: 90%;
    height: 60px;
    // background-color: rgb(187, 177, 177);
    line-height: 60px;
    cursor: pointer;

    .title {
      float: left;
      font-size: 20px;
      font-weight: bold;
      padding: 0 1em; /*1em等于当前字体大小20px*/
      color: white;
    }
    .category {
      float: left;
      ul li {
        float: left;
        padding: 0 1.5em;
        color: white;
      }
      li:hover {
        color: rgb(68, 132, 228);
        font-weight: bold;
      }
    }
    .contact {
      float: right;
      color: white;
    }
    .contact:hover {
      color: rgb(68, 132, 228);
      font-weight: bold;
    }
  }
}
</style>